<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	    <meta name="viewport" content="width=device-width, initial-scale=1" />
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>我的订单</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet" />
	    <style>
	    	.control-label {
	    		font-size: 12px;
	    		padding-right: 0;
	    	}
	    	table {
	    		margin-top: 50px;
	    	}
	    </style>
	
	    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	    <!--[if lt IE 9]>
	      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>
	<body>
	    <div class="container-fluid">	
		    
		    <div class="panel panel-default">
    			<div class="panel-heading">
				    <h3 class="panel-title">出口代理服务订单列表</h3>
				</div>	
				<!--面板内容-->
				<div class="panel-body">
					
					<div class="row form-horizontal">
						<!--出口口岸-->
						<div class="col-lg-3 col-sm-4 col-xs-6">
							<div class="form-group">
							    <label class="col-md-3 control-label">服务类型：</label>
							    <div class="col-md-9">
							      	<select class="form-control">
									    <option>1</option>
									</select>
							    </div>
							</div>
						</div>
						<!--出口口岸-->
						<div class="col-lg-3 col-sm-4 col-xs-6">
							<div class="form-group">
							    <label class="col-md-3 control-label">付款方式：</label>
							    <div class="col-md-9">
							      	<select class="form-control">
									  <option>1</option>
									  <option>2</option>
									</select>
							    </div>
							</div>
						</div>
						<!--出口口岸-->
						<div class="col-lg-3 col-sm-4 col-xs-6">
							<div class="form-group">
							    <label class="col-md-3 control-label">订单编号：</label>
							    <div class="col-md-9">
							      	<input type="text" class="form-control" placeholder="订单编号" title="请输入..." />
							    </div>
							</div>
						</div>
						<!--出口口岸-->
						<div class="col-lg-3 col-sm-4 col-xs-6">
							<div class="form-group">
							    <label class="col-md-3 control-label">开证人：</label>
							    <div class="col-md-9">
							      	<input type="text" class="form-control" placeholder="开证人" title="请输入..." />
							    </div>
							</div>
						</div>
						<!--出口口岸-->
						<div class="col-lg-3 col-sm-4 col-xs-6">
							<div class="form-group">
							    <label class="col-md-3 control-label">订单状态：</label>
							    <div class="col-md-9">
							      	<select class="form-control">
									  <option>1</option>
									  <option>2</option>
									</select>
							    </div>
							</div>
						</div>
						
					</div>
					<!--button-->
					<p class="col-xs-12 text-center">
						<a href="javascript:;" class="btn btn-primary">搜索</a>
					</p>
					
					<table class="table table-striped table-striped-change" id="goodForm">
					</table>
					
					<!--刷新按钮-->
					<p class="col-xs-12 text-center">
					<input type="button" class="btn btn-primary" id="exchangeBtn" value="刷新" />
					</p>
					
					<!--分页-->
					<div id="div_pager">
		
					</div>
					
    		    </div>
					
			</div>
	    	
	    </div>
	    
	    <!--jQuery (necessary for Bootstrap's JavaScript plugins)--> 
	    <script src="js/vendor/jquery-2.2.4.min.js"></script>
	    <!-- Include all compiled plugins (below), or include individual files as needed -->
	    <!--<script src="js/vendor/bootstrap.min.js"></script>-->
	    <script src="js/custom/main.js"></script>
	    <script type="text/javascript" src="js/custom/modelBuilder.js"></script>
		<script type="text/javascript">
		
			/**
			 * 构建表格数据
			 */
			var UQT_detailTable = $('#goodForm');
			var builderUQTQueryMsg = function (UQTQueryMsg){
			    
			    UQT_detailTable.empty();
			    var th = '<thead><tr><th>订单编号</th><th>服务类型</th><th>国外客户</th><th>下单时间</th><th>订单状态</th><th>操作</th></tr></thead>';
			
			    UQT_detailTable.append(th);
			    var tr  ;
			    $.each(UQTQueryMsg, function(i,eachData){
			        tr = $('<tr>');
			        var numberN = eachData.numberN;
			        var service = eachData.service;
			        var client = eachData.client;
			        var time = eachData.time;
			        var state = eachData.state;
			        tr.append('<td>'
			                      +numberN
			                 +'</td><td>'
			                      +service
			                 +'</td><td>'
			                      +client
			                 +'</td><td>'
			                      +time
			                 +'</td><td>'
			                      +state
			                 +'</td>'
			                      + '<td><div><a href="">查看详情</a></div><div><a href="">删除</a></div>'
			                 +'</td>');
			        UQT_detailTable.append(tr);
			    });
			}
			
			var listJsonData = [{
					numberN:'0100416541',
					service:'海关货物报关',
					client:'Jason',
					time:'2017-8-31',
					state:'待审核'
			}];
			
			
			var kg = 1;
			$('#exchangeBtn').click(function(){
				
				
				if(kg == 1){
					$.ajax({  
			            url: 'js/data/exchange.json',  
			            type: 'GET',  
			            dataType: 'json',  
			            timeout: 1000,  
		//	            cache: false, 
			            beforeSend: LoadFunction, //加载执行方法    
			            error: erryFunction,  //错误执行方法    
			            success: succFunction //成功执行方法    
			        })  
			        function LoadFunction() {  
//				            UQT_detailTable.append('加载中。。。');
			        }  
			        function erryFunction() {  
			            alert("error");  
			        }  
			        function succFunction(data) {  
			            
						for(var i in data.listJsonDataA){
							var trNew = '<tr><td>'
				                              +data.listJsonDataA[i].numberN
						                 +'</td><td>'
						                      +data.listJsonDataA[i].service
						                 +'</td><td>'
						                      +data.listJsonDataA[i].client
						                 +'</td><td>'
						                      +data.listJsonDataA[i].time
						                 +'</td><td>'
						                      +data.listJsonDataA[i].state
						                 +'</td>'
						                      + '<td><div><a href="">查看详情</a></div><div><a href="">删除</a></div>'
						                 +'</td></tr>';
				            UQT_detailTable.append(trNew);
						};
			        }; 
			        kg = 0;
				};
			});
			
			
		</script>
	    
	</body>
</html>
